<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 解决table-cell元素内连续英文字符无法换行的问题 */
        .word-break{
            display:table;
            width:100%;
            table-layout: fixed;
            word-break:break-all;
        }
        /* 单行省略 */
        .ell{
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
        }
        .ell-rows-2{
            display:-webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .wrap{
            width:300px;
        }
        .box{
            height:200px;
            border:1px solid #ddd;
            overflow:hidden;
        }

        .list{
            line-height:200px;
            background:#ddd;
        }
        .list:nth-of-type(1){
            background:lavender;
        }
        .list:nth-of-type(2){
            background:lemonchiffon;
        }
        .list:nth-of-type(3){
            background:lightblue;
        }
        .list:nth-of-type(4){
            background:lightcoral;
        }
        .link a, .click{
            display:inline-block;
            padding:5px 10px;
            font-size:14px;
        }


        /* 利用focus实现选项卡 */
        .list2{
            position:relative;
        }
        .list2 > input{
            position:absolute;
            top:0;
            height:100%;
            width:1px;
            border:0;
            padding:0;
            margin:0;
            clip:rect(0 0 0 0);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <!-- <div class="box">
            <div class="list" id="one">1</div>
            <div class="list" id="two">2</div>
            <div class="list" id="three">3</div>
            <div class="list" id="four">4</div>
        </div>
        <div class="link">
            <a href="#one">1</a>
            <a href="#two">2</a>
            <a href="#three">3</a>
            <a href="#four">4</a>
        </div> -->

        <div class="box">
            <div class="list list2"><input id="one">1</div>
            <div class="list list2"><input id="two">2</div>
            <div class="list list2"><input id="three">3</div>
            <div class="list list2"><input id="four">4</div>
        </div>
        <div class="link2">
            <label class="click" for="one">1</label>
            <label class="click" for="two">2</label>
            <label class="click" for="three">3</label>
            <label class="click" for="four">4</label>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $('label.click').removeAttr("for").on('click', function(){
            $('.box').scrollTop(200)
        })
        /*
            line-height可以垂直居中，是因为行距上下等分机制
            float
                一侧定宽，一侧自适应
            pc
                document.documentElement.scrollTop
            移动端
                document.body.scrollTop
        */ 
       
        for(var i = 0; i<10; i++){
            var random = Math.random()
            console.log(random)
        }
        
    </script>
</body>
</html>